<!-- 110报警呈批单（指挥） -->
<template>
  <div class="exter-commun-box">
    <div class="exter-commun-box-filter">
      <el-form ref="form" label-width="80px">
        <div class="table-filter table-filter-home">
          <div>
            <el-form-item label="创建时间:">
              <el-date-picker
                v-model="time"
                clearable
                type="datetimerange"
                value-format="yyyyMMddHHmmss"
                format="yyyy-MM-dd HH:mm:ss"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['00:00:00']"
              />
            </el-form-item>
          </div>

          <div>
            <el-form-item label="关键词:">
              <el-input v-model="condition.keyword.value" placeholder="报警内容、标题" clearable />
            </el-form-item>
          </div>
          <div>
            <el-form-item class="operate-btns">
              <el-button type="primary" size="mini" @click="() => $refs.table.searchForm()"> 查询 </el-button>
              <!-- <el-button type="primary" size="mini">导出</el-button> -->
              <el-button size="mini" @click="reset">重置</el-button>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
    <div class="exter-commun-box-content">
      <div class="table">
        <comm-table ref="table" :condition="condition" :columns="columns" url="/v1/jqxx-approval/search">
          <template slot-scope="{ row }">
            <div>
              <el-button
                v-permission="['JQXX_CP']"
                type="text"
                @click="() => $router.push({name:'PoliceApprovalApproval',params:{id:row.id}})"
              >
                呈批
              </el-button>
              <el-divider direction="vertical"></el-divider>
              <el-button
                type="text"
                 v-permission="['JQXX_XG']"
                @click="() => $router.push({ name:'PoliceApprovalModify',params:{spdid:row.id,jqid:row.jqxxbh} })"
              >
                修改
              </el-button>
              <el-divider direction="vertical"></el-divider>
              <el-button
                type="text"
                v-permission="['JQXX_ZL']"
                @click="() => $router.push({ name:'PoliceApprovalOrder',params:{id:row.id,zlly:'2',flowid:row.id} })"
              >
                指令
              </el-button>
              <el-divider direction="vertical"></el-divider>
              <el-button
                v-permission="['JQXX_BL']"
                type="text"
                @click="() => $router.push({name:'PoliceApprovalSupple',params:{id:row.id,isShowJbGz:false}})"
              >
                补录
              </el-button>
              <el-divider direction="vertical" v-permission="['XXXX_PRINT']"></el-divider>
              <el-button type="text" v-permission="['XXXX_PRINT']" @click="openPrintPage(row)">打印</el-button>
            </div>
          </template>
        </comm-table>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex';
import {deleteProcess, printYaxx} from '@/api/common';
import { deepClone } from '@/utils/common';
export default {
  name: 'PoliceApprovalHome',
  data() {
    return {
      // 列表查询条件
      condition: {
        sbsj: { // 创建时间用sbsj
          value: '',
          op: 'custom_rangeDateTime'
        },
        keyword: {
          value: '',
          op: 'like'
        }
      },
      cloneCondition: null,
      time: '',
      // 表格项
      columns: [
        { type: 'index', label: '序号', width: 70 },
        { label: '编号', prop: 'id', width: 180 },
        {
          label: '标题',
          prop: 'title',
          render: (h, row) => {
            const _this = this;
            return h(
              'span',
              {
                class: 'v-link',
                on: {
                  click() {
                    // 隐藏tooltip(由于不自动消失)
                    $('.el-tooltip__popper').css('display', 'none');
                    _this.$router.push({ name: 'PoliceApprovalDetail', params: { id: row.id
,zlly:'2' } }); // 指令来源为2代表是110报警呈批单（指挥）下发
                  }
                }
              },
              row.bt
            );
          },
          width: 300
        },
        { label: '报警内容', prop: 'bjnr' },
        { label: '处置情况', prop: 'cjqk' },
        { label: '拟办意见', prop: 'nbyj' },
        { label: '报警时间', prop: 'bjsj', width: 180 },
        { label: '创建时间', prop: 'sbsj', width: 180 },
        { label: '操作', type: 'operate', width: 300 }
      ]
    };
  },
    activated(){
    this.$refs.table.searchForm()
  },
  watch: {
    time(val) {
      this.condition.sbsj.value = val ? `${val[0]},${val[1]}` : '';
    }
  },
  computed: {
    ...mapState(['constant'])
  },
  mounted() {
    this.cloneCondition = deepClone(this.condition);
  },
  methods: {
    /**
     * 删除外部来文
     */
    deleteRow({ id }) {
      this.$confirm('确认删除此数据?')
        .then(() => {
          deleteProcess(id).then(() => {
            this.$refs.table.searchForm();
          });
        })
        .catch(() => {
          this.$message.warning('删除失败');
        });
    },
    /**
     * 重置
     */
    reset() {
      this.time = null;
      this.condition = { ...deepClone(this.cloneCondition), labelType: this.condition.labelType };
      this.$nextTick(() => {
        this.$refs.table.searchForm();
      });
    },
    /**
     * 打印
     */
    openPrintPage(row){
      let doc_name = '报警呈批单';
      let doc_id = row.id;
      let type = '3';
      printYaxx(doc_id, doc_name, type);
    }
  }
};
</script>
<style scoped lang="scss">
.exter-commun-box-content {
  background: #fff;
  margin-top: 0.6rem;
  .table {
    padding: 20px;
    button {
      margin-bottom: 10px;
    }
  }
}
</style>
